<template>
	<view class="tabBlock u-tabs" :style="'background:' + bgColor + ';'">
		<scroll-view
			@scroll="scroll"
			class="u-scroll-view"
			:scrollLeft="tabsScrollLeft"
			:scrollWithAnimation="true"
			:scrollX="isScroll"
			:style="'padding-left:' + paddingLR + 'rpx' + ';' + 'padding-right:' + paddingLR + 'rpx' + ';'"
		>
			<view :class="['u-scroll-box', isCenter ? 'flex flex-justify-between' : '']" id="tab_list" :style="'height:' + height + 'rpx' + ';' + 'line-height:' + height + 'rpx' + ';'">
				<view
					@tap="clickTab(index, item)"
					class="u-tab-item"
					id="tab_item"
					:style="'margin-right:' + (!isCenter ? marginRt + 'rpx' : '') + ';'"
					v-for="(item, index) in tabsData"
					:key="index"
				>
					<view
						class="tab__item-title flex flex-align-center"
						:style="
							'color:' +
								(value == index ? activeColor : color) +
								';' +
								'font-size:' +
								(value == index ? activeFontSize + 'rpx' : fontSize + 'rpx') +
								';' +
								'font-weight:' +
								(activeFontBold && value == index ? 'bold' : '400') +
								';'
						"
						v-if="!showTitleSlot"
					>
						<text>{{ item[keyName] }}</text>
						<text class="f-base ml10" v-if="item.tip && item.tip != '' && item.tip != 0 && tipMode === 'kuoHao'">{{ '(' + item.tip + ')' }}</text>
					</view>
					<view class="abs tag red sm f-xxs" style="right:5rpx;top:10rpx;height:24rpx;line-height:24rpx;" v-if="item.tip && item.tip != '' && tipMode === 'hongDian'">
						{{ '' + item.tip + '' }}
					</view>
				</view>
				<view
					class="tab__line"
					:style="
						'background:' +
							lineColor +
							';' +
							'height:' +
							lineHt +
							'rpx' +
							';' +
							'width:' +
							lineStyle.width +
							';' +
							'transform:' +
							lineStyle.transform +
							';' +
							'transition-duration:' +
							lineStyle.transitionDuration +
							';' +
							'bottom:' +
							LineTobottom +
							'rpx' +
							';'
					"
				></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: [Number, String],
			default: 0
		},
		keyName: {
			type: String,
			default: 'title'
		},
		tabsIndex: {
			type: [Number, String],
			default: 0
		},
		bgColor: {
			type: String,
			default: ''
		},
		isScroll: {
			type: [Boolean, String],
			default: !1
		},
		tabsData: {
			type: [Array, Object],
			default: function() {
				return [];
			}
		},
		height: {
			type: [Number, String],
			default: 90
		},
		color: {
			type: String,
			default: ''
		},
		fontSize: {
			type: [Number, String],
			default: 36
		},
		lineHt: {
			type: [Number, String],
			default: 8
		},
		activeColor: {
			type: String,
			default: ''
		},
		activeFontBold: {
			type: [Boolean, String],
			defalut: !1
		},
		activeFontSize: {
			type: [Number, String],
			default: 40
		},
		lineColor: {
			type: String,
			default: '#FFDA00'
		},
		LineTobottom: {
			type: [Number, String],
			default: 0
		},
		lineAnimated: {
			type: Boolean,
			default: !0
		},
		isCenter: {
			type: Boolean,
			default: !1
		},
		duration: {
			type: [Number, String],
			default: 0.5
		},
		marginRt: {
			type: [Number, String],
			default: 45
		},
		paddingLR: {
			type: [Number, String],
			default: 30
		},
		tipMode: {
			type: String,
			default: 'kuoHao'
		}
	},
	data: function() {
		return {
			currentIndex: 0,
			lineStyle: {
				width: ''
			},
			scrollLeft: 0,
			tabsScrollLeft: 0,
			CustomBar: this.CustomBar,
			tabToTop: 0,
			barFirstTimeMove: !0
		};
	},
	computed: {
		showTitleSlot: function() {
			return this.$scopedSlots.title;
		}
	},
	watch: {
		tabsData: {
			immediate: !0,
			handler: function(t) {
				var e = this;
				t.length &&
					this.$nextTick(function() {
						e.setTabList(), e.setLine(), e.getTabToTop();
					});
			}
		},
		value: function() {
			(this.currentIndex = this.value), this.setTabList();
		},
		tabsIndex: {
			immediate: !0,
			handler: function(t) {
				this.currentIndex = t;
			}
		}
	},
	mounted: function() {
		(this.currentIndex = this.value), this.lineAnimated || (this.duration = 0);
	},
	methods: {
		clickTab: function(t, e) {
			this.$emit('clickTab', t), this.$emit('tabItem', e);
		},
		setTabList: function() {
			var t = this;
			this.$nextTick(function() {
				t.tabsData.length > 0 && (t.setLine(), t.scrollIntoView()),
					t.domData('.tabBlock', function(e) {
						if (e.length)
							try {
								t.$emit('tabHeight', e[0].height);
							} catch (e) {
								e = VM2_INTERNAL_STATE_DO_NOT_USE_OR_PROGRAM_WILL_FAIL.handleException(e);
								t.$emit('tabHeight', 0);
							}
					});
			});
		},
		setLine: function() {
			var t = this,
				e = 0,
				n = 0;
			this.domData('#tab_item', function(a) {
				var i = a[t.currentIndex] ? a[t.currentIndex] : 0;
				i &&
					((e = i.width / 2),
					(n = i.width / 2 - a[0].left + i.left),
					(t.lineStyle = {
						width: ''.concat(e, 'px'),
						transform: 'translateX('.concat(n, 'px) translateX(-50%)'),
						transitionDuration: ''.concat(t.barFirstTimeMove ? 0 : t.duration, 's')
					}),
					1 == t.barFirstTimeMove &&
						setTimeout(function() {
							t.barFirstTimeMove = !1;
						}, 100));
			});
		},
		scrollIntoView: function() {
			var t = this,
				e = 0;
			this.domData('#tab_list', function(n) {
				if (n.length) {
					var a = n[0];
					t.domData('#tab_item', function(n) {
						var i = n[t.currentIndex] ? n[t.currentIndex] : 0;
						i && ((e = i.width / 2 - a.left + i.left - a.width / 2 - t.scrollLeft), (t.tabsScrollLeft = t.scrollLeft + e));
					});
				}
			});
		},
		getTabToTop: function() {
			var t = this;
			this.domData('.tabBlock', function(e) {
				e.length && (t.tabToTop = e[0].top);
			});
		},
		scroll: function(t) {
			this.scrollLeft = t.detail.scrollLeft;
		}
	}
};
</script>

<style>
.u-scroll-box,
.u-scroll-view {
	position: relative;
}

.u-scroll-view {
	white-space: nowrap;
	width: 100%;
}

.u-tab-item {
	display: inline-block;
	position: relative;
	text-align: center;
	transition-property: background-color, color;
}

.tab__line {
	border-radius: 30rpx;
	position: absolute;
}

.u-tabs-scorll-flex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
</style>
